import { View,Text,Image } from "@tarojs/components";


import arrowIcon from '@/assets/images/arrow.png'
import { IOrderDetailData } from "@/typing";
import { forwardRef } from "react";
import { API_URL } from "@/common/serviveApi";
import dayjs from 'dayjs'
interface IFinishedOrderItem{
    orderInfo: IOrderDetailData;
    handleShowOrder:(orderInfo)=>void
    

  
}
const FinishedOrderItem:React.FC<IFinishedOrderItem>=forwardRef((props,ref)=>{
  const {orderInfo,handleShowOrder} = props
  const topicTitle = orderInfo.topic&& orderInfo.topic.title ? orderInfo.topic.title : ''

  return (
   <>
    <View className='mt-34px bg-#fff box-border pt-30px px-22px pb-46px w-684px mx-auto mb-34px'>
    <View className='pl-10px pr-16px box-border flex items-center justify-between'>
      <View className='flex items-center'>
        <View className="w-56px h-56px rounded-100px overflow-hidden"><Image src={`${API_URL}${orderInfo.avatar}`} className="w-56px h-56px"></Image></View>
        <Text className='ml-18px text-#161618 text-30px'>{orderInfo.nickname}</Text>
      </View>
      <View className='flex items-center' onClick={()=>handleShowOrder(orderInfo)}>
          <Text className='text-#555 text-30px'>订单详情</Text>
          <Image src={arrowIcon} className='w-13px h-23px ml-12px'></Image>
      </View> 
    </View>
    <View className='px-8px box-border mt-24px'>
      <View className='text-32px font-medium text-#161618 line-clamp-3 leading-50px'>{topicTitle}</View>
      {orderInfo.remark && <View className='text-28px  text-#555555 line-clamp-3 leading-50px mt-20px'>
        用户备注：{orderInfo.remark}
      </View>}
     

      <View className='mt-20px text-#555555 text-26px flex items-center '>
        {orderInfo.status === -1?<Text>取消时间 {dayjs.unix(orderInfo.cancel_time).format('MM-DD HH:mm')}</Text>:<Text>完成时间 {dayjs.unix(orderInfo.complete_time).format('MM-DD HH:mm')}</Text>}
        

      </View>
    </View>
   </View></>
)
})
export default FinishedOrderItem;